<template>
  <div class="huopinzhonglei">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">货品种类管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen()" v-if="USER.auth.indexOf('base_huopinzhonglei_add')!==-1">新增货品种类</el-button>
      </div>
      <s-table
        :table="table"
        :expand="false"
        @http="tableWatch">
        <el-row>
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="种类名称" prop="mc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_mc"
                        placeholder="种类名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--<el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="操作"
          width="120">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="tableEdit(s.row)"  icon="edit"></el-button>
            <el-button type="info" size="mini" @click="tableDelete(s.row)" icon="delete"></el-button>
          </template>
        </el-table-column>-->
      </s-table>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}货品种类<span>{{USER.hz[0]? USER.hz[0].show_hzid : '暂无货主'}}</span></p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-form-item prop="mc" label="种类名称">
            <el-input
              ref="zhonglei"
              @keyup.enter.native="getkuweiFocus(1)"
              type="text"
              v-model="formDialog.mc"
              placeholder="种类名称"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="sfhf" label="货品混放">
            <el-select
              v-model="formDialog.sfhf"
              ref="huopin"
              placeholder="请选择">
              <el-option
                v-for="item in HUOPINZHONGLEI.sfhf"
                :key="item.dictionaryid"
                :label="item.value"
                :value="item.dictionaryid">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
    <s-dialog :dialog="dialogEdit" :close="dialogInit">
      <p slot="title">{{dialogEdit.title}}货品种类</p>
      <s-form :form="formDialogEdit" ref="formDialogEdit">
        <el-row>
          <el-form-item prop="mc" label="种类名称">
            <el-input
              type="text"
              v-model="formDialogEdit.mc"
              placeholder="种类名称"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="sfhf" label="货品混放">
            <el-select v-model="formDialogEdit.sfhf" placeholder="请选择">
              <el-option
                v-for="item in HUOPINZHONGLEI.sfhf"
                :key="item.dictionaryid"
                :label="item.value"
                :value="item.dictionaryid">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  import { AutoVue } from '~/plugins/Tools';

  function __form () {
    return {
      mc: {value: '', rule: ['vNull'], cRemarks: ''},
      sfhf: {value: 0, rule: ['vNull'], cRemarks: '货品种类是否混放0否 1 是'},
    };
  }

  export default AutoVue({
    name: 'base_huopinzhonglei-FEcarWms',
    head: {
      'title': '货品种类管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 货品种类 查看货品种类信息' },
      ],
    },
    store: ['DICTIONARY_huopinzhonglei', 'HUOPINZHONGLEI', 'USER'],
    data: {
      table: {
        column:
          [{
            label: '种类名称',
            prop: 'mc',
            minWidth: '0px',
            cRemarks: '',
            search: true,
          },
          {
            label: '允许混放',
            prop: 'show_sfhf',
            elTag: {
              filterType: function (value) {
                return value === '是' ? 'success' : 'danger';
              },
            },
            formatter: (row, column) => {
              return row[column.property || column] !== '是' ? '不允许' : '允许';
            },
            minWidth: '0px',
            cRemarks: '货品种类是否混放0否 1 是',
            search: false,
          }],
        // popover :弹出层
        popover: {
          width: 900,
        },
        url: '/wmsgoodstype/list',
        key: 'id',
        tableColumn: 2,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
      },
      formDialogEdit: __form(),
      dialogEdit: {
        title: '修改',
        row: {},
      },
    },
    transition: 'slide-fade',
    methods: {
      getkuweiFocus (len) {
        let path = event.path;
        for (let i = 0, type = true; (i < path.length) && (type = true); i++) {
          let classname = path[i].className;
          if (classname !== '' && classname !== undefined) {
            if (classname.indexOf('el-form ') !== -1 || classname === 'el-form') {
              const DOM = path[i][len];
              DOM.focus();
              type = false;
            }
          }
        }
      },
      dialogInit () {
        this.dialog.row = {};
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen () {
        if (!this.DICTIONARY_huopinzhonglei) {
          await this.USE('DICTIONARY_huopinzhonglei');
        }
        this.dialog.title = '新增';
        this.dialog.visible = true;
        setTimeout(() => {
          this.$refs.zhonglei.$el.children[0].focus();
        }, 100);
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              let {data} = await this.post('/wmsgoodstype/goodsAdd', option);
              option.sshzid = data.sshzid;
              this.table.data = [data, ...this.table.data];
              this.table.total++;
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialogEdit', async option => {
            try {
              option.id = this.dialog.row.id;
              await this.post('/wmslibraryposition/edit', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialogEdit.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
      async tableEdit (row) {
        this.formDialogEdit = {
          ...this.formDialogEdit,
          ...this.ObjectClone(__form(), row),
        };
        this.dialogEdit.row = row;
        this.dialog.visible = true;
      },
      tableDelete (row) {
        this.$confirm('您将删除货品种类。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/wmslibraryposition/delete/', {
                ids: ids.length === 0 ? [row.id] : ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          });
      },
    },
    mounted: function () {
      this.tableWatch('table');
      console.log('huopinzhognlei.vue');
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .huopinzhonglei{
    width: 88vw;
    float: left;
  }
</style>
